CSS—与文本有关的属性设置


  • 字号font-size
    //相对单位
    font-size:14px; //px与当前使用的显示屏的分辨率有关,14px,即占用14个像素点。
    font-size:1.5em; //em相对于文本对象内原来的字体尺寸,1.5em,即是原来该字所处段落的字体尺寸的1.5倍。
    font-size:200%; //与em解释相同,2倍。
    font-size:1.5rem; //这是css3的新增单位,详情看本文最下面。
    //绝对定位
    //in、cm、pt(基本不用,无需了解)
  • 颜色color
    color: #FF0000; //采用#+6位16进制表示
    color: blue; //颜色名称
    color: rgb(155,2,2);//r:红;g:绿;b:蓝;
  • 字体font-family
    引自这里,作者写的很好,我复制了一下,方便自己看。
    font-family: Georgia, "Times New Roman",
    "Microsoft YaHei", "微软雅黑",
    STXihei, "华文细黑",
    serif;
    —规则:每种字体以,号分隔开;子体内有空格需加""
    优先使用排在前面的字体进行渲染,如果前面的字体不包括该字的渲染效果,则使用下一个字体。例如:

中文字体里面包括英文的渲染效果,但是比较丑。如果将中文字体放在前面,则英文也被强迫渲染啦。建议:将英文字体放在中文字体前面,这样英文字体将引文渲染后,无法对中文进行渲染,将对中文渲染的工作交给下一个字体。

如果font-family列举的字体,用户主机内都没有,则计算机采用默认字体进行设置。
—注意:将mac字体放在微软字体前(考虑mac用户);同时列出中文字体的英文名称(兼容性考虑)
—理解:衬线体与非衬线体

百科上的一张图,很容易看懂

如图可以发现衬线体是比较具有装饰性的,比较好看,但是当字体小于14px时,字的可识别性降低。
—推荐:
font-family:Helvetica,Arial,//安全放心字体
"Microsoft Yahei","微软雅黑",//win7上才安装。
宋体, SimSun, //安全放心字体
STXihei, "华文细黑";//微软雅黑在Mac平台的对应字体是华文细黑(STXihei)
//另有一种安全放心的英文字体是手写类,在需要可爱的地方可以用一下
// font-family:'Comic Sans MS

  • 样式font-style
    font-style: normal;//常规
    font-style: intalic;//斜体
    font-style: oblique;//斜体
  • 粗细font-weight
    font-weight:bold;
    font-weight:normal;
    //虽然可以用数字,但是这样就可以满足一般的要求啦。
  • 行高line-height
    我对于网上有些人简单粗暴地理解她为行间距,感到很生气,误导了我好一阵,参照W3C手册,正解是这样的。
    段落行间距

多行文本

font-size:20px;
line-height:150%;//推荐。
//随着字体越大,行间距应该越小,所以行高也要越小。
—技巧:单行文本居中设置(参照上图不难理解)
p{
height:100px;//段落块的高度
line-height:100px;
}

  • 段落修饰text-decoration
    text-decoration:overline;//上划线
    text-decoration:underline;//下划线
    text-decoration:line-through;//删除线
    text-decoration:blink;//闪烁
    text-decoration:none;//无
    注意:text-decoration:blink;大部分浏览器都不支持这一属性值,说明存在兼容问题,所以我们在编写时,应尽量不使用存在兼容问题的css属性。可以采用其他效果代替。

  • 字符间距letter-spacing
    设置字符(汉字或字母)间距。
    letter-spacing:20px;

  • 单词间距word-spacing
    注意:实际上是针对空格的处理,在汉语间插入空格(不论多少),也可以达到效果。
    word-spacing: 8px;

  • 文本缩进 text-indent
    text-indent: 2em;//该段落的首行缩进2个字符长度。
    —首行悬浮怎么实现?
    text-indent:-2em;
    padding-left:3em;
    —解释:

    首行缩进为负的2em

    设置zuo

  • 文本对其 text-aline
    注意:指的是文本横向对齐
    text-aline:center;
    text-aline:left;
    text-aline:right;

  • 文本中空白处理 white-space
    white-space: normal;//默认,不考虑空格,换行。
    white-space: pre;//保留原来文档内部的换行,空格
    white-space: nowrap;//强制性的要求文档处于一行。

  • 文本大小写 text-transform
    text-transform: capitalize;//首字母大写
    text-transform: uppercase;//全部大写
    text-transform: lowercase;//全部小写
    text-transform: normal//默认

  • **文本中元素垂直对齐 vertical-aline **
    这个属性存在很大的兼容性,不建议使用。等学的多了,再写一篇关于这个的。


CSS3对于字体的新功能。

通过Css3,web设计师再也不必被迫使用web-safe字体。

  • 使用方法
    在新的@font-face规则中,您必须首先定义字体的名称,然后指向该字体文件。如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称。
    <style>
    @font-face
    {
    font-family: myFirstFont; //设置字体名称
    src: url('Sansation_Light.ttf'), //设置字体文件来源
    url('Sansation_Light.eot'); /* IE9+ /
    }
    @font-face
    {
    font-family: myFirstFont; //设置字体名称
    src: url('Sansation_Bold.ttf'), //设置字体文件来源
    url('Sansation_Bold.eot'); /
    IE9+ */
    font-weight:bold;
    //设置条件,当需要让字体加粗时,会自动调用这个加粗的字体样式
    }
    div
    {
    font-family:myFirstFont;
    }
    </style>
    <body>
    <div>这里面有一个<b>加粗</b>的字</div>
    </body>
    文件 "Sansation_Bold.ttf" 是另一个字体文件,它包含了 Sansation 字体的粗体字符。只要 font-family 为 "myFirstFont" 的文本需要显示为粗体时(<b>),浏览器就会使用该字体。
    兼容性:
    源自W3C

CSS3对于字号的新增单位:rem

参考这里

  • 解释
    使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。
  • 好处
    这个的好处是相对于rm在使用时的不方便而来的。
    如果在根元素或是content中已经声明过字体大小。
    html{font-size:1.2em;}
    这时如果需要对P元素在进行设置字号大小,
    p{font-size:1.2em;}
    —问题:浏览器默认为16px,根元素进行设置后,字号大小为:16*1.2=19.2px; em是相对单位,相对该内容原来的字号而定,p的原来大小即刚刚根元素设置的19.2px,现在又进行设置后,大小应该为:19.2*1.2=23.04,但是设计本意也许只是想让p为19.2px
    —解决方法1:在根元素中这样声明字体
    html{font-size:62.5%}
    默认尺寸时:1em=16px;则现在的字体大小为:0.625*16px=10px;
    那么12px=1.2em;此时,在后续元素更改字号时,可以参照1em=10px来进行设置。
    —解决方法2:css3新增单位
    当我们在body{font-size:1.2rem;}中进行设置后,再在body内子元素p{font-size:1.2rem;}进行设置,效果是一样的,他们的参照大小均是浏览器的默认大小。所以字号大小均是:1.2*16px=19.2px;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,290评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,399评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,021评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,034评论 0 207
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,412评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,651评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,902评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,605评论 0 199
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,339评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,586评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,076评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,400评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,060评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,083评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,851评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,685评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,595评论 2 270

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,630评论 1 92
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,006评论 0 40
  • CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 1,209评论 0 3
  • 本文为阅读《Head First HTML 与 CSS》的css部分的读书笔记,方便回顾书上的知识,另一篇为Hea...
    兼续阅读 1,767评论 0 17
  • 1.花头饱满 2.叶子发绿有光泽,叶子坚挺 3.花杆粗,直,长 4.花根新鲜,不要选泡过水,发黄变黑的 叶材注意事...
    简书米阅读 324评论 0 0